<script setup lang="ts">
import { RouterView } from "vue-router";
import GlobalHeader from "./components/GlobalHeader.vue";
import GlobalFooter from "./components/GlobalFooter.vue";
import Loader from "./components/Loader.vue"
import {useMainStore} from "@/stores/main"
import { computed, ref, onMounted } from "vue";

const store = useMainStore();
const isShowHeader = ref(true);

onMounted(() => {
  (document.querySelector("#app") as HTMLElement).addEventListener(
    "scroll",
    (e) => {
      // 头部显示隐藏
      function handleScroll(e) {
        // 要注意节点没渲染出来
        if (e.target.scrollTop > 60) {
          isShowHeader.value = false;
        } else {
          isShowHeader.value = true;
        }
      }
      handleScroll(e);
    }
  );
});
</script>

<template>
  <header
    :class="[
      'global-header',
      isShowHeader ? 'header-top-show' : 'header-top-noshow',
    ]"
  >
    <GlobalHeader :user="store.user"></GlobalHeader>
  </header>
  <section class="main-contaner">
    <section class="primary-main-view">
      <RouterView></RouterView>
    </section>
    <GlobalFooter></GlobalFooter>
    <!-- 设置加载中 -->
    <Loader
      v-if="store.isLoading"
      text="拼命加载中"
      background="rgba(0,0,0,0.8)"
    ></Loader>
  </section>
</template>

<style lang="scss" scoped>
@import "@/css/common.scss";
.global-header {
  z-index: 9;
  height: 60px;
  position: sticky;
  left: 0;
  width: 100%;
  top: 0;
  // 控制头部的显示隐藏
  &:hover {
    transform: translateY(0);
  }
  background: var(--Theme-6);
  transition: all 0.5s ease-out;
  border-radius: 0 0 12px 12px;
}
.header-top-show {
  transform: translateY(0);
}
.header-top-noshow {
  transform: translateY(-50px);
}
.primary-main-view {
  position: relative;
}
</style>
